<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="watchdata">
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>

    </div>
    <script>
        var login = {
            template : '<h2>我是登录组件</h2>'
        }
        var register = {
            template : '<h2>我是注册组件</h2>'
        }
        const router = new VueRouter({
            routes : [
                {path : '/' , redirect : '/login'},
                {path : '/login' , component : login},
                {path : '/register' , component : register}
            ]
        })    
        new Vue({
            el : '#app',
            data : {
                watchdata : ''
            },
            methods : {

            },
            router,
            watch: {
                // 利用 watch 监视数据变化
                watchdata : function(newdata,olddata){
                    console.log(newdata + '-----' + olddata)   
                },
                // 利用 watch 监视路由路径的变化
                '$route.path' : function(newdata,olddata){
                    // console.log(newdata + '-----' + olddata)
                    if(newdata == '/login'){
                        console.log('欢迎进入登录模块') 
                    }else{
                        console.log('欢迎进入注册模块')
                    }
                }
            }
        })
    
    </script>
</body>
</html>